<template>
    <div class="container">
        <div class="tips">
            <div class="title">请认真填写以下信息，确保无误正确。填写说明：</div>
            <div class="info">1、 法人和企业信息校验通过后，法人将收到微信模板消息。</div>
            <div class="info">2、 法人需在24小时内点击消息，进行身份证信息与人脸识别信息收集。</div>
            <div class="info">3、 法人人脸认证通过后，将自动创建已认证的小程序。</div>
            <div class="info">
                4、 法人将收到设置小程序登录邮箱和密码的微信模板消息，点击消息前往设置登录邮箱和密码即可。
            </div>
        </div>
        <div class="corporateWrapper">
            <div class="title"><span></span>法人快速注册小程序</div>
            <el-form class="zw-el-form" ref="formRef" :rules="rules" :model="form" label-width="110px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人姓名" prop="legalPersonName">
                            <el-input
                                maxlength="20"
                                placeholder="请输入法人姓名"
                                v-model.trim="form.legalPersonName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="法人微信号" prop="legalPersonWechat">
                            <el-input
                                maxlength="20"
                                placeholder="请输入法人微信号"
                                v-model.trim="form.legalPersonWechat"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业名称" prop="businessName">
                            <el-input
                                maxlength="20"
                                placeholder="请输入企业名称"
                                v-model.trim="form.businessName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业代码类型" prop="codeType">
                            <el-select v-model="form.codeType" placeholder="请选择企业代码类型" @change="vaildConfirm">
                                <el-option
                                    v-for="item in codeList"
                                    :key="item.name"
                                    :label="item.name"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="企业代码" prop="code">
                            <el-input maxlength="20" placeholder="请选择企业代码" v-model.trim="form.code"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系电话" prop="componentPhone">
                            <el-input
                                maxlength="20"
                                placeholder="请选择企业联系电话"
                                v-model.trim="form.componentPhone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item class="mt30">
                            <el-button class="submit" type="primary" @click="submitHandler">提交申请</el-button>
                            <el-button class="cancel" type="default" plain @click="cancelHandler">取消</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive, inject, watch } from 'vue';
import { getRegExp, isNotEmpty } from '@/commons/utils';

const props = defineProps({
    row: {
        type: Object,
        default: () => {
            return {};
        }
    }
});

const confirm = inject('confirm');
const emit = defineEmits(['submit', 'cancel']);
const formRef = ref(null);

const form = reactive(props.row);

const codeList = reactive([
    {
        name: '统一社会信用代码(18 位)',
        value: 1
    },
    {
        name: '组织机构代码（9 位 xxxxxxxx-x）',
        value: 2
    },
    {
        name: '营业执照注册号(15 位)',
        value: 3
    }
]);
const codeLimit = (rule, value, callback) => {
    if (form.codeType === '') {
        callback(new Error('请选择企业代码类型'));
    } else if (form.code === '') {
        callback(new Error('请输入企业代码'));
    } else {
        callback();
    }
};
const rules = reactive({
    legalPersonName: [
        { required: true, message: '请输入法人姓名', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    legalPersonWechat: [{ required: true, message: '请输入法人微信号', trigger: 'blur' }],
    businessName: [
        { required: true, message: '请输入企业名称', trigger: 'blur' },
        {
            pattern: getRegExp('chinese'),
            message: '只能输入中文',
            trigger: 'blur'
        }
    ],
    codeType: [{ required: true, message: '请选择企业代码类型', trigger: 'change' }],
    code: [{ required: true, validator: codeLimit, trigger: 'blur' }],
    componentPhone: [
        { required: true, message: '请输入联系人手机号', trigger: 'change' },
        { pattern: getRegExp('phone'), message: '请输入正确的手机号', trigger: 'blur' }
    ]
});
const vaildConfirm = () => {
    formRef.value.validateField('codeType');
};

const submitHandler = () => {
    formRef.value.validate(async valid => {
        try {
            if (
                valid &&
                (await confirm(
                    `<b>确认要提交申请吗？</b>
                <p>提交申请后不支持修改，请确保填写的内容准确无误。</p>`,
                    'warning',
                    '',
                    true
                ))
            ) {
                emit('submit', form);
            }
        } catch (e) {}
    });
};
const cancelHandler = () => {
    emit('cancel');
};
</script>
<style lang="scss" src="./style.scss" scoped></style>
